<template>
  <div id="cart">
    <Navbar>
      <div slot="left" class="arrow" @click="$router.back()">
        <van-icon name="arrow-left" size="20px" />
      </div>
      <h4 slot="center" class="title">购物车({{ cartLength }})</h4>
    </Navbar>
    <CartList />
    <CartBottom />
  </div>
</template>

<script>
import Navbar from "@/components/navbar";

import CartBottom from "./childCpn/cart-bottom";
import CartList from "./childCpn/cart-list";

import { mapGetters } from "vuex";

import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);

export default {
  name: "",
  components: {
    Navbar,
    CartList,
    CartBottom,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      'cartLength'
    ])
  }
};
</script>
<style scoped>
.title {
  color: #fff;
}

.arrow {
  position: absolute;
  left: 10px;
  color: #fff;
}
</style>